<template>
	<view>
		<camera v-if="!showSettingBtn" device-position="back" :flash="openLight" mode="scanCode" @scancode="scanCodeEvent" @error="error" style="width: 100%; height: 100vh;">
			<cover-view class="content">
				<cover-image class="bg" src="../../../static/images/sn_scanbg.png"></cover-image>

				<!-- 扫一扫 -->
				<cover-view class="wrapper" :hidden="!showPage">
					<cover-view class="tip"><lang keywords="请对准商品条形码哦~" tag="cover-view"></lang></cover-view>
				</cover-view>

				<!-- 自助购 -->
				<cover-view class="wrapper" :hidden="store == '' || showPage">
					<cover-view class="step-box">
						<cover-view class="step-item">
							<cover-image src="../../../static/images/sn_scanbuy1.png"></cover-image>
							<cover-view><lang keywords="店铺定位" tag="cover-view"></lang></cover-view>
						</cover-view>
						<cover-view class="step-item line"></cover-view>
						<cover-view class="step-item">
							<cover-image src="../../../static/images/sn_scanbuy2.png"></cover-image>
							<cover-view><lang keywords="添加商品" tag="cover-view"></lang></cover-view>
						</cover-view>
						<cover-view class="step-item line"></cover-view>
						<cover-view class="step-item">
							<cover-image src="../../../static/images/sn_scanbuy3.png"></cover-image>
							<cover-view><lang keywords="支付结算" tag="cover-view"></lang></cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="tip"><lang keywords="请对准商品条形码哦~" tag="cover-view"></lang></cover-view>

					<cover-view class="bottom-info">
						<cover-image src="../../../static/images/sn_scanbuy5.png" v-if="openLight == 'on'" @tap="changeLight" data-tag="off"></cover-image>
						<cover-image src="../../../static/images/sn_scanbuy4.png" v-else @tap="changeLight" data-tag="on"></cover-image>
						<cover-view class="name-wrapper">
							<cover-view class="name-box">
								<cover-view>（</cover-view>
								<cover-view class="name">{{ store.name }}</cover-view>
								<cover-view class="change" @tap="changeStore"><lang keywords="换一家店？" tag="cover-view"></lang></cover-view>
								<cover-view>）</cover-view>
							</cover-view>
						</cover-view>
						<cover-view class="desc" @tap="checkEcplain"><lang keywords="扫码购怎么使用？" tag="cover-view"></lang></cover-view>
					</cover-view>

					<cover-view class="footer">
						<cover-view class="item shopcart" @tap="gotoShopcart">
							<cover-image src="../../../static/images/sn_scanbuy6.png"></cover-image>
							<cover-view><lang keywords="购物车" tag="cover-view"></lang></cover-view>
						</cover-view>
						<cover-view class="item order" @tap="checkMyOrder">
							<cover-image src="../../../static/images/sn_scanbuy7.png"></cover-image>
							<cover-view><lang keywords="我的订单" tag="cover-view"></lang></cover-view>
						</cover-view>
					</cover-view>
				</cover-view>

				<!-- 头部导航 -->
				<cover-view class="tap">
					<cover-view class="tap-item" @click.stop="navClick" data-index="1">
						<lang keywords="扫一扫" tag="cover-view"></lang>
						<cover-view class="border" :hidden="!showPage"></cover-view>
					</cover-view>
					<cover-view class="tap-item" @click.stop="navClick" data-index="2" :hidden="store == ''">
						<lang keywords="自助购" tag="cover-view"></lang>
						<cover-view class="border" :hidden="showPage"></cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</camera>

		<button :hidden="!showSettingBtn" class="setting" open-type="openSetting" bindopensetting="openSetting"><lang keywords="打开摄像头" tag="cover-view"></lang></button>
	</view>
</template>

<script>
import common from '../../../utils/common.js';
var app = getApp();
var _this;
// 获取摄像头授权
const getAuthorization = () => {
	wx.getSetting({
		success: res => {
			if (res.authSetting['scope.camera'] != undefined && res.authSetting['scope.camera'] != true) {
				//非初始化进入该页面,且未授权
				wx.showModal({
					title: common.changeTxt('是否授权'),
					content: common.changeTxt('需要获取您的摄像头，请确认授权，否则功能将无法使用'),
					success: function(res) {
						_this.showSettingBtn = true
					}
				});
			}
		}
	});
};
// 获取店铺信息
const getStoreInfo = () => {
	var param = {
		only_one: 1,
		lng: '',
		lat: ''
	};
	var address = app.globalData.delivery_address;
	if (address) {
		param.lng = address.lng;
		param.lat = address.lat;
		common.post('Shop_new&a=near_offline_shop', param, data => {
			if (data.store_id) {
				_this.store = data;
			}
		});
	}
};

export default {
	data() {
		return {
			showPage: false,
			openLight: 'auto',
			barcode: '',
			showSettingBtn: false,
			store: '',
			refresh: 0,
			goods_list: []
		};
	},

	onUnload() {
		wx.removeStorageSync('scanList');
	},

	onShow() {
		this.barcode = '';
		//var e = {};
		//e.detail = {};
		//e.detail.result = '6922711074757';
		//this.scanCodeEvent(e);
		// 获取扫码购购物车数据

		wx.getStorage({
			key: 'scanList',
			success: res => {
				_this.goods_list = res.data;
			},
			fail: () => {
				_this.goods_list = [];
			}
		});
	},

	onLoad(option) {
		_this = this;
		common.setMainColor(_this);
		wx.setNavigationBarTitle({
			title: common.changeTxt('扫码购')
		});
		// 获取摄像头权限
		getAuthorization();

		_this.showPage = option.showPage ? option.showPage : true
		// 获取店铺
		getStoreInfo();
	},

	components: {},
	props: {},
	methods: {
		error() {
			_this.showSettingBtn = true;
		},

		// 打开设置
		openSetting(e) {
			if (e.detail.authSetting['scope.camera'] == true) {
				_this.showSettingBtn = false;
			}
		},

		// 顶部tap切换
		navClick(e) {
			var index = e.currentTarget.dataset.index;
			_this.showPage = index == '1' ? true : false;
			wx.hideLoading();
		},

		// 控制闪光灯
		changeLight(e) {
			var tag = e.currentTarget.dataset.tag;

			_this.openLight = tag;
		},

		// 点击购物车
		gotoShopcart() {
			wx.navigateTo({
				url: `/pages/shop_new/scanGoodsList/scanGoodsList?store_id=${_this.store.store_id}&store_name=${_this.store.name}`
			});
		},

		// 查看订单
		checkMyOrder() {
			common.parseUrl('url/My/shop_order_list', 'shop', false);
		},

		//扫码结束页面
		scanCodeEvent(e) {
			//e.detail.type   barcode
			//e.detail.result  6922711074757
			// if (e.detail.result == _this.barcode){
			//   return false;
			// }
			if (_this.isSearch === true) {
				return;
			}

			_this.isSearch = true;
			_this.barcode = e.detail.result;
			console.log(e);
			const innerAudioContext = wx.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = 'https://hf.pigcms.com/static/images/qrcode.mp3';
			innerAudioContext.volume = 1;
			wx.vibrateLong();
			wx.showLoading({
				title: common.changeTxt('正在处理...')
			});

			if (_this.showPage) {
				// 扫一扫
				common.post('Shop_new&a=barcodeGetName', { barcode: e.detail.result }, data => {
					console.log('2222222222222242142341扫一扫码', data);
					wx.navigateTo({
						url: '/pages/shop_new/search/search?type=barcode&key=' + e.detail.result + '&name=' + encodeURIComponent(data.name),

						complete() {
							wx.hideLoading();
						}
					});
					setTimeout(function() {
						_this.isSearch = false;
					}, 1000);
				});
			} else {
				// 自助购
				var param = {
					barcode: e.detail.result,
					store_id: _this.store.store_id,
					refresh: _this.refresh
				};
				common.post('Shop_new&a=shop_barcode_search', param, data => {
					_this.refresh = _this.refresh + 1;
					console.log('999999999999999扫码结果', data);

					if (data.name) {
						data.select_num = 1;
						var flag = true;

						_this.goods_list.map(item => {
							if (item.goods_id === data.goods_id) {
								flag = false;
								item.select_num++;
							}

							return item;
						});

						if (flag) {
							_this.goods_list = _this.goods_list.concat(data);
						}

						uni.setStorage({
							key: 'scanList',
							data: _this.goods_list,
							success: () => {
								uni.navigateTo({
									url: `/pages/shop_new/scanGoodsList/scanGoodsList?store_id=${_this.store.store_id}&store_name=${_this.store.name}`
								});
								setTimeout(function() {
									_this.isSearch = false;
								}, 1000);
							}
						});
					} else {
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('商品库中暂无此商品，请联系店员'),
							showCancel: false,
							success: function() {
								_this.isSearch = false;
							}
						});
					}
				});
			}
		},

		// 点击查看扫码购使用教程
		checkEcplain() {
			uni.navigateTo({
				url: '/pages/shop_new/scanBuyExplain/scanBuyExplain'
			});
		},

		// 换一家店
		changeStore() {
			uni.navigateTo({
				url: '/pages/shop_new/scanBuyLocate/scanBuyLocate'
			});
		},
	}
};
</script>
<style>
/* pages/shop_new/scanBuy/scanBuy.css */
page {
	height: 100%;
	position: relative;
}

.content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.bg {
	width: 100%;
	height: 100%;
}
.wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
}
.tap {
	width: 100%;
	color: #fff;
	font-size: 20px;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
}
.tap .tap-item {
	width: 80px;
	text-align: center;
	margin: 0 10px;
}
.tap .tap-item .border {
	height: 3px;
	width: 80%;
	margin-left: 10%;
	background: #fff;
	margin-top: 5px;
}
.tip {
	color: #fff;
	font-size: 12px;
	text-align: center;
	position: absolute;
	top: 26%;
	left: 0;
	right: 0;
	z-index: 3;
}

.step-box {
	display: flex;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	padding: 20px 0;
	margin-top: 50px;
}
.step-box cover-image {
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
}
.step-box .step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.step-box .line {
	margin-top: 15px;
	height: 1rpx;
	width: 50px;
	background: #fff;
}

.bottom-info {
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 160rpx;
	text-align: center;
	font-size: 12px;
}
.bottom-info cover-image {
	width: 35px;
	height: 35px;
	display: inline-block;
	margin-bottom: 20rpx;
}
.bottom-info .name-wrapper {
	display: flex;
	justify-content: center;
	color: #06c1ae;
	margin-bottom: 20rpx;
}
.bottom-info .name-wrapper .name-box {
	display: flex;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 20px;
	padding: 3px 0;
	width: 60%;
}
.bottom-info .name-wrapper .name-box .name {
	font-size: 14px;
	color: #fff;
	width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bottom-info .name-wrapper .name-box .change {
	color: #fa372d;
	margin-left: 10px;
	font-size: 12px;
}
.bottom-info .desc {
	text-decoration: underline;
	color: #dfdfdf;
}

.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	color: #fff;
	font-size: 28rpx;
	padding: 20rpx 0;
	background: rgba(0, 0, 0, 0.4);
}
.footer .item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer cover-image {
	margin-bottom: 10rpx;
}
.footer .shopcart cover-image {
	height: 49rpx;
	width: 57rpx;
}
.footer .order cover-image {
	height: 49rpx;
	width: 47rpx;
}

.setting {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #ccc;
	padding: 5px 10px;
}
</style>
